import React from 'react'
import { View, Text, Image, ScrollView, Button } from '@tarojs/components'
import useNavBarInfo from '@/hook/useNavBarInfo'
import './index.scss'
import Taro from "@tarojs/taro";

const AppraisalDetail = () => {
  const navBarInfo = useNavBarInfo()
  const handleBack = () => {
    const pages = Taro.getCurrentPages()
    if (pages.length > 1) {
      Taro.navigateBack()
    } else {
      Taro.reLaunch({ url: '/pages/index/index' })
    }
  }
  return (
    <View className="appraisal-detail" style={{ display: 'flex', flexDirection: 'column' }}>
      <View
        className="user-bar"
        style={{
          paddingTop: `${navBarInfo.statusBarHeightRpx}rpx`,
          height: `${navBarInfo.totalHeightRpx}rpx`,
          flexShrink: 0,
          position: 'fixed',
          top: 0,
          left: 0,
          width: '100%',
          zIndex: 999,
          backgroundColor: '#fff',
          display: 'flex',
          alignItems: 'center',
          paddingLeft: '24rpx',
          paddingRight: '24rpx',
          boxSizing: 'border-box'
        }}
      >
        <View className="nav-back" onClick={handleBack}>
          <Image
            src={require('@/assets/back.png')}
            className="back-icon"
          />
        </View>
        <Image className="avatar" src={require(`../../../assets/photo.png`)} />
        <View className="user-info">
          <Text className="nickname">鉴酒大师</Text>
          <Text className="time-place">2025-05-12 11:03:25 · 广东</Text>
        </View>
      </View>
      <ScrollView
        className="content-scroll"
        scrollY
        style={{
          flexGrow: 1,
          marginTop: `${navBarInfo.totalHeightRpx}rpx`,
          marginBottom: '140rpx',
        }}
      >
        <View className="tag-box">
          <Image className="main-image" src={require(`../../../assets/home/details/goods.png`)} />
          <ScrollView className="thumbnail-scroll" scrollX>
            <Image className="thumbnail" src={require(`../../../assets/home/details/goods.png`)} />
          </ScrollView>
          <View className="tags-desc">
            <View className="tags">
              <Text className="tag">96-09年茅台</Text>
              <Text className="tag">礼尚往来</Text>
            </View>
            <Text className="desc-text">朋友送的，放在家里有一段时间，放上来看看</Text>
          </View>

          <View className="stats-bar">
            <View className="stat"><Image className="stat-image" src={require(`../../../assets/home/details/see.png`)}></Image>    23</View>
            <View className="stat"><Image className="stat-image" src={require(`../../../assets/home/details/comment.png`)}></Image>23</View>
            <View className="stat"><Image className="stat-image" src={require(`../../../assets/home/details/share.png`)}></Image>  23</View>
          </View>
        </View>


        <Image className="banner-image" src={require(`../../../assets/home/details/banner.png`)} />
        <View className="appraisal-box">
          <View className="appraisal-info-card">
            <View className="title-row">
              <Text className="title">线上鉴定描述：</Text>
              <Text className="btn-verify">点击进行实物鉴定</Text>
              <View className="badge-box">
                <Image className="badge" src={require(`../../../assets/fake.png`)} />
                <View className="badge-title" >鉴定为假</View>
              </View>
            </View>
            <Text className="info-content">
              线上鉴定指的是用户通过本平台上传照片/视频进行外观鉴定 故，对于鉴定结果仅作参考;你也可以 通过线下方式到店鉴定
            </Text>
          </View>
          <View className="comment-list">
            <View className="comment">
              <Image className="avatar" src={require(`../../../assets/photo.png`)} />
              <View className="comment-content">
                <View className="dsc">
                  <Text className="comment-name">鉴酒官方</Text>
                  <Text className="comment-text">我也觉得是假的</Text>
                </View>
                <Text className="comment-time">2025-01-24 16:15</Text>
              </View>
            </View>
          </View>
          <View className="ding"></View>

        </View>

      </ScrollView>

      <View className="bottom-bar">
        <Button className="participate-button" >
          参与鉴定
        </Button>
      </View>
    </View>
  )
}

export default AppraisalDetail
